#!M:/WinPython-64bit-3.4.4.3Qt5/python-3.4.4.amd64/python.exe
#coding=utf-8
print("Content-Type:text/html\n\n")


print("""<!--
	描述：多文件拖拽异步上传
-->
<!DOCTYPE html>
<html lang='zh-Hans'>
	<head>
		<meta http-equiv='Content-Type' content='text/html';charset='utf-8'>
		<title></title>
		<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
	</head>
	<style>
		#container{
			margin-top: 50px;
			border-radius: 8px;
			border:dashed 1px black;
			background: rgba(222,222,222,0.3);
			height: 350px;
			width:800px;
			margin-left:auto;
			margin-right:auto;
			box-shadow: 1px 1px 1px darkgrey
		}
		h3{
			text-align: center;
		}
		li{
			list-style: none;
			float: left;
			margin: 8px;
			border: 1px solid gray;
			background: white;
			border-radius: 6px;
			height: 120px;
			width: 100px;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 10px;
			text-overflow: ellipsis;
			overflow: hidden;
			
		}
		#filelist{
			padding: 20px 15px;
		}
		.canvas_{
			width:100%;
			height: 23px;
			background: rgba(222,222,222,0.2);
			border-radius: 6px;
			box-shadow: 0px 0px 1px rgba(0,0,0,0.6);
		}
		.progressBar_{
			padding-top: 50%;
			margin-left: 5%;
			margin-right: 5%;
			margin-bottom: 5%;
		}
		span{
			text-overflow: ellipsis;
			overflow: hidden;
			white-space:nowrap; 
			
		}
          .percentage{
                 margin:0px;
                 text-align: center;
                 color:darkgray;
          }
	</style>	
	<body>
            <script>
                    function handerDrop(event)
                    {
                            
                            event.preventDefault();
                            event.stopPropagation();
                            
                            var fili=document.getElementById('filelist');
                            var files=event.dataTransfer.files;
                            if (files.length<=6)
                            {
                                    for(var i=0;i<files.length;i++)
                                    {
                                            var li=document.createElement('li');
                                            var progressBar=document.createElement('div');
                                            var filename=document.createElement('span');
                                            var canvas=document.createElement('canvas');
                                            var percentage=document.createElement('p');
                                            progressBar.className='progressBar_'
                                            percentage.className='percentage'
                                            percentage.textContent='0%'
                                            canvas.className='canvas_'
                                            canvas.id='canvas_'+i
                                            canvas.width=90
                                            canvas.height=23
                                            fili.appendChild(li);
                                            li.appendChild(filename);
                                            li.appendChild(progressBar);
                                            progressBar.appendChild(percentage)
                                            progressBar.appendChild(canvas)
                                            filename.innerHTML=files[i].name;
                                            var xhr=new XMLHttpRequest()
                                            var data=new FormData()
                                            xhr.open('POST','handle_upload.py',true)
                                            data.append('file',files[i])
                        
                                            var upload=xhr.upload
                                            upload.canvas=canvas
                                            upload.percentage=percentage
                                            upload.addEventListener('progress',uploadProgress,false)
                                            //upload.addEventListener('load',uploadSucceed,false)
                                            //upload.addEventListener('error',uploadError,false)
                                            xhr.send(data)
                                            
                                    }

                            }
                            else
                            {
                                       alert('最多上传6个文件')
                            }
                            

                                    
                    }
                    function uploadProgress(event)
                    {
                         ctx=event.target.canvas.getContext('2d')
                         ctx.moveTo(0,12)
                         ctx.lineWidth=23
                         ctx.lineTo(90*event.loaded/event.total,12)
                         ctx.strokeStyle='cornsilk'
                         ctx.stroke()
                         //alert(event.target.percentage)
                         event.target.percentage.textContent=Math.round(event.loaded/event.total)*100+'%'
                         
                         
                    }
                    window.addEventListener('load',function() {
                    container=document.getElementById('container')
                    container.addEventListener('dragenter',function(event){
                            event.stopPropagation();
                            event.preventDefault();
                    },false)
                    container.addEventListener('dragover',function(event){
                            event.stopPropagation()
                            event.preventDefault()
                    },false)
                    container.addEventListener('drop',handerDrop,false)		
                    })
            </script>
		<div id="container">
			<h3>拖拽上传文件</h3>
			<div id="filelist"></div>
		</div>
		</script>
	</body>
</html>


     """)